<template>
  <div>
    <a-row>
      <a-button :style="{ marginBottom: '1rem', marginRight: '1rem' }" type="primary" @click="handleBatchGroup">
        分组</a-button
      >
      <a-button :style="{ marginBottom: '1rem' }" type="primary" @click="handleBatchDelete"> 删除</a-button>
      <a-modal
        :visible="deleteVisible"
        :confirm-loading="confirmLoading"
        @ok="handleOk2"
        @cancel="handleCancel2"
        width="350px"
      >
        <span>请确认是否要删除所选报告单</span>
      </a-modal>
      <a-modal
        title="请选择分组"
        :visible="groupVisible"
        :confirm-loading="confirmLoading"
        @ok="handleOk3"
        @cancel="handleCancel3"
        width="350px"
      >
        <a-select v-model="groupId" :style="{ marginLeft: '2rem' }" style="width: 200px">
          <a-select-option :value="item.dataId" v-for="item in panes" :key="item.dataId">
            {{ item.groupName }}
          </a-select-option>
        </a-select>
      </a-modal>
    </a-row>
    <a-spin tip="上传中" :spinning="spinning0">
      <a-card title="未分组" :bordered="false" class="card-area">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :before-upload="beforeUpload"
          :showUploadList="false"
          :multiple="true"
          :action="uploadImgUrl"
          @change="handleImportImage0"
        >
          <div>
            <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
            <div class="iconp">
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </div>
        </a-upload>
        <a-checkbox-group v-model="ungroupSelect" v-viewer="option">
          <a-checkbox v-for="item in ungroup" :value="item.dataId" :key="item.dataId">
            <template>
              <div class="photo">
                <img :src="item.reportUrl" :data-source="item.reportUrl" />
              </div>
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-spin>
    <a-spin tip="上传中" :spinning="spinning1">
      <a-card title="既往病史" :bordered="false" class="card-area">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :multiple="false"
          :action="uploadImgUrl"
          @change="handleImportImage1"
        >
          <div>
            <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
            <div class="iconp">
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </div>
        </a-upload>
        <a-checkbox-group v-model="anaSelect" v-viewer="option">
          <a-checkbox v-for="item in ana" :value="item.dataId" :key="item.dataId">
            <template>
              <div class="photo">
                <img :src="item.reportUrl" :data-source="item.reportUrl" />
              </div>
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-spin>
    <a-spin tip="上传中" :spinning="spinning2">
      <a-card title="实验室检测" :bordered="false" class="card-area">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :multiple="false"
          :action="uploadImgUrl"
          @change="handleImportImage2"
        >
          <div>
            <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
            <div class="iconp">
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </div>
        </a-upload>
        <a-checkbox-group v-model="labSelect" v-viewer="option">
          <a-checkbox v-for="item in lab" :value="item.dataId" :key="item.dataId">
            <template>
              <div class="photo">
                <img :src="item.reportUrl" :data-source="item.reportUrl" />
              </div>
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-spin>
    <a-spin tip="上传中" :spinning="spinning3">
      <a-card title="影像学检测" :bordered="false" class="card-area">
        <a-upload
          name="file"
          list-type="picture-card"
          class="avatar-uploader"
          :showUploadList="false"
          :multiple="false"
          :action="uploadImgUrl"
          @change="handleImportImage3"
        >
          <div>
            <!--<img v-if="!isMultiple && picUrl" :src="getAvatarView()" style="width:100%;height:100%"/>-->
            <div class="iconp">
              <a-icon :type="uploadLoading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">上传</div>
            </div>
          </div>
        </a-upload>
        <a-checkbox-group v-model="iconSelect" v-viewer="option">
          <a-checkbox v-for="item in icon" :value="item.dataId" :key="item.dataId">
            <template>
              <div class="photo">
                <img :src="item.reportUrl" :data-source="item.reportUrl" />
              </div>
            </template>
          </a-checkbox>
        </a-checkbox-group>
      </a-card>
    </a-spin>
  </div>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'

export default {
  name: 'Report',
  inject: ['closeCurrent'],
  components: {},
  data() {
    return {
      loading: true,
      deleteVisible: false,
      uploadLoading: false,
      confirmLoading: false,
      groupVisible: false,
      spinning0: false,
      spinning1: false,
      spinning2: false,
      spinning3: false,
      option: {
        toolbar: true,
        url: 'data-source'
      },
      list: [],
      ungroup: [],
      ana: [],
      lab: [],
      icon: [],
      mutiList: [],
      ungroupSelect: [],
      anaSelect: [],
      labSelect: [],
      iconSelect: [],
      fileList: [],
      groupId: 0,
      count: 0,
      panes: [
        {
          groupName: '未分组',
          dataId: 0
        },
        {
          groupName: '既往病史',
          dataId: 1
        },
        {
          groupName: '实验室检测',
          dataId: 2
        },
        {
          groupName: '影像学检测',
          dataId: 3
        }
      ],
      url: {
        imgUrl: 'sys/common/upload'
      }
    }
  },
  computed: {
    uploadImgUrl() {
      return `${window._CONFIG['domianURL']}/${this.url.imgUrl}`
    }
  },
  watch: {
    mutiList(n) {
      if (n.length == this.count) {
        postAction('dossier/report/save', {
          patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
          reportUrls: n,
          type: 0
        })
          .then(res => {
            if (res.success) {
              this.$message.success('上传成功')
              this.getInfo()
              this.mutiList = []
            } else {
              this.$message.warning(res.message)
            }
          })
          .finally(() => {
            this.count = 0
            this.spinning0 = false
          })
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      postAction('dossier/report/query', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.list = res.result
            this.ungroup = res.result.filter(v => {
              return !v.type
            })
            this.ana = res.result.filter(v => {
              return v.type == 1
            })
            this.lab = res.result.filter(v => {
              return v.type == 2
            })
            this.icon = res.result.filter(v => {
              return v.type == 3
            })
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleOk2() {
      this.confirmLoading = true
      const reportIdList = [...this.ungroupSelect, ...this.anaSelect, ...this.labSelect, ...this.iconSelect]
      postAction('dossier/report/del', {
        dataIdList: reportIdList
      })
        .then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.getInfo()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.deleteVisible = false
        })
    },
    handleOk3() {
      this.confirmLoading = true
      const reportIdList = [...this.ungroupSelect, ...this.anaSelect, ...this.labSelect, ...this.iconSelect]
      console.log(reportIdList)
      postAction('dossier/report/group', {
        patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
        type: Number(this.groupId),
        reportIdList: reportIdList
      })
        .then(res => {
          if (res.success) {
            this.$message.success(res.message)
            this.getInfo()
          } else {
            this.$message.error(res.message)
          }
        })
        .finally(() => {
          this.confirmLoading = false
          this.groupVisible = false
          this.groupId = 0
        })
    },
    handleCancel2() {
      this.deleteVisible = false
    },
    handleCancel3() {
      this.groupVisible = false
    },
    beforeUpload() {
      this.spinning0 = true
      this.count++
    },
    handleImportImage0(info) {
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          this.mutiList.push(info.file.response.message)
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    handleImportImage1(info) {
      this.spinning1 = true
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          postAction('dossier/report/save', {
            patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
            reportUrls: [info.file.response.message],
            type: 1
          })
            .then(res => {
              if (res.success) {
                this.$message.success('上传成功')
                this.getInfo()
              }
            })
            .finally(() => {
              this.spinning1 = false
            })
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.spinning1 = false
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    handleImportImage2(info) {
      this.spinning2 = true
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          postAction('dossier/report/save', {
            patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
            reportUrls: [info.file.response.message],
            type: 2
          })
            .then(res => {
              if (res.success) {
                this.$message.success('上传成功')
                this.getInfo()
              }
            })
            .finally(() => {
              this.spinning2 = false
            })
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.spinning2 = false
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    handleImportImage3(info) {
      this.spinning3 = true
      if (info.file.status === 'done') {
        if (info.file.response.success) {
          postAction('dossier/report/save', {
            patientId: this.$route.query[PAGE_MENU_TYPE.PatientId],
            reportUrls: [info.file.response.message],
            type: 3
          })
            .then(res => {
              if (res.success) {
                this.$message.success('上传成功')
                this.getInfo()
              }
            })
            .finally(() => {
              this.spinning3 = false
            })
        }
        //this.$message.success(`${info.file.name} 上传成功!`);
      } else if (info.file.status === 'error') {
        this.spinning3 = false
        this.$message.error(`${info.file.name} 上传失败.`)
      }
    },
    handleBatchDelete() {
      const selected = [...this.ungroupSelect, ...this.anaSelect, ...this.labSelect, ...this.iconSelect]
      if (selected.length == 0) {
        this.$message.error('请选择报告单')
      } else {
        this.deleteVisible = true
      }
    },
    handleBatchGroup() {
      const selected = [...this.ungroupSelect, ...this.anaSelect, ...this.labSelect, ...this.iconSelect]
      if (selected.length == 0) {
        this.$message.warning('请选择报告单')
      } else {
        this.groupVisible = true
      }
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-upload {
  width: 104px;
  height: 104px;
}
/deep/ .iconp {
  padding: 20px;
}
/deep/ .ant-card {
  margin-bottom: 10px;
}
/deep/ .ant-card-head-wrapper {
  border-bottom: 1px solid #e8e8e8;
}
/deep/ .ant-card-head {
  border-bottom: none;
}
/deep/ .ant-card-body {
  display: flex;
}
/deep/.ant-upload-picture-card-wrapper {
  width: 112px;
}
.photo {
  width: 104px;
  height: 104px;
  padding: 8px;
  margin-right: 10px;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
}
.photo img {
  width: 100%;
  height: 100%;
}
/deep/.ant-checkbox-group {
  display: flex;
  flex-wrap: wrap;
}
/deep/.ant-checkbox-wrapper {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
/deep/.ant-checkbox-wrapper + .ant-checkbox-wrapper {
  margin-left: 0;
}
</style>

